<template>
<div>
	<div class="row">
		<div class="col-xs-offset-2 col-xs-8">
			<div class="page-header">
				<h2>Router Basic - 01</h2>
			</div>
		</div>
	</div>
	
	<div class="row">
		<div class="col-xs-2 col-xs-offset-2">
			<div class="list-group">
				<!-- 此处的名字必须和配置的路由器中的名字完全一致，不能随便写 -->
				<router-link to="/about" class="list-group-item">About</router-link>
				<router-link to="/home" class="list-group-item">Home</router-link>
			</div>
		</div>
		<div class="col-xs-6">
			<div class="panel">
				<div class="panel-body">
					<!-- 
						默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
						如果可以缓存路由组件对象, 可以提高用户体验
						keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，
						从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素
					-->
					<keep-alive>
						<router-view msg="属性携带数据"></router-view>
					</keep-alive>
				</div>
			</div>
		</div>
		
	</div>
</div>
</template>

<script>
</script>

<style>
</style>
